<template>
  <div class="home-filmmaker">
    <h2 class="class-title">热门影人</h2>
    <el-card
      class="box-card"
      v-for="(filmmaker,index) in filmmakerList"
      :key="filmmaker.id"
    >
      <div
        class="filmmaker-wrap1"
        v-if="index === 0"
      >
        <i class="filmmaker-top">{{ index + 1 }}</i>
        <img
          src="../../../../public/home/hotFilmmaker/1.jpg"
          alt=""
        >
        <h3
          class="filmmaker-title"
          @mouseover="changeColor(index)"
          @mouseout="moveColor()"
          ref="filmmakerTitle"
        >{{ filmmaker.title }}</h3>
      </div>
      <div
        class="filmmaker-wrap2"
        v-else
      >
        <span
          class="filmmaker-index"
          :class="{'activeIndex': index + 1 === 2 || index + 1 === 3 }"
        >{{ index + 1 }}</span>
        <span
          class="filmmaker-title"
          @mouseover="changeColor(index)"
          @mouseout="moveColor()"
          ref="filmmakerTitle"
        >{{ filmmaker.title }}</span>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data: () => ({
    arr: [],
    moveIndex:'',
    filmmakerList: []
  }),
  created() {
    this.getHotFilmmaker()
  },
  methods: {
    changeColor(index) {
      this.arr = Array.from(this.$refs.filmmakerTitle)
      this.arr[index].style.color = "#ef4238"
      this.moveIndex = index
    },
    moveColor() {
      this.arr[this.moveIndex].style.color = "#333"
    },
    async getHotFilmmaker() {
      try {
        const { data: { message } } = await this.Api.getHotFilmmaker()
        this.filmmakerList = message
        console.log(this.filmmakerList)
      } catch (error) {
        this.$MsgBox('获取首页热门影人的信息失败')
      }
    }
  }
};
</script>
<style lang="less">
.home-filmmaker {
  .class-title {
    color: #ffb400;
  }
  .el-card {
    border: none;
    .el-card__body {
      padding: 0;
      .filmmaker-wrap1 {
        height: 78px;
        position: relative;
        .filmmaker-top {
          display: inline-block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 18px;
          height: 18px;
          color: #fff;
          background-color: #ef4238;
        }
        .filmmaker-title {
          position: absolute;
          left: 130px;
          top: 20px;
          font-size: 14px;
          font-weight: normal;
        }
      }
      .filmmaker-wrap2 {
        height: 20px;
        padding: 10px 3px;
        line-height: 35px;
        .filmmaker-index {
          display: block;
          width: 20px;
          font-size: 16px;
          float: left;
          font-style: italic;
          color: #999;
          margin-right: 10px;
        }
        .filmmaker-title {
          display: block;
          max-width: 190px;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          float: left;
        }
        .activeIndex {
          color: #ef4238;
        }
      }
    } 
  }
  .el-card.is-always-shadow{
    box-shadow:none;
  }
}
</style>